<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- 经测试 animate.css 不适用于 transition-group 标签，好像只能在 transition 内使用 -->
        <!-- appear 属性表示页面初始时候带有动画效果 -->
        <transition name="animate__animated animate__bounce" enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp" appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
// 引入第三方css库，记得安装：npm install animate.css
import 'animate.css'

export default {
    name: 'Test',
    data() {
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
h1 {
    background-color: orange;
}
</style>